/*
 * @Author: YuanSong
 * @Date: 2021-12-01 10:56:40
 * @Last Modified by: YuanSong
 * @Last Modified time: 2021-12-03 16:29:09
 */
import React from "react";
import NormalPage from "@components/NormalPage";
import LoginBox from "@/components/LoginBox/index";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { connect } from "react-redux";
import { AppState } from "@redux/reducers";
import { bindActionCreators } from "redux";
import { IGlobalReduceState } from "@/redux/reducers/global";
import { requestLogOut } from "@redux/actions/user";
import store from "store";
import { THEMES } from "@/store/constants";
import Dialog from "@/components/Dialog";
import MineBlock from "@views/PersonalCenter/mineblock";
type IProps = RouteComponentProps &
  IGlobalReduceState & {
    requestLogOut: typeof requestLogOut;
  };
class PersonalCenter extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
    this.handleNavItemClick = this.handleNavItemClick.bind(this);
  }
  readonly state = {
    navigationObj: {
      chose: 0,
      navItemArr: [
        {
          svgSrc: "hidepassword",
          title: "个人中心",
        },
        {
          svgSrc:"hidepassword",
          title: "返回首页"
        },
        {
          svgSrc: "hidepassword",
          title: "退出登录",
          marginTop: "20px",
        },
      ],
    },
    modalVisible: false, //退出登录的确认dialog是否显示
  };
  componentDidMount() {
    console.log("进入了personal center");
  }
  tranColor(title: string, value: string) {
    document.getElementsByTagName("body")[0].style.setProperty(title, value);
  }
  handleNavItemClick(index: number) {
    if (index !== 2 && index !== 1){
      this.setState({
        navigationObj: {
          ...this.state.navigationObj,
          chose: index,
        },
      });
    }
      
    if (this.state.navigationObj.navItemArr[index].title === "返回首页") {
      this.props.history.push('/');
    }
    if (this.state.navigationObj.navItemArr[index].title === "退出登录") {
      this.setState({
        modalVisible:true,
      })
    }
  }
  private logOutMethod(){
    this.props.requestLogOut(() => {
      let theme = "light";
      document.getElementsByClassName("App")[0].className = "App " + theme;
      //改变主题颜色

      let themeGather = store.get(THEMES);
      this.tranColor(
        "--foreground-color",
        themeGather[theme].foregroundColor
      );
      this.tranColor("--span-color", themeGather[theme].spanColor);
      this.tranColor("--sub-span-color", themeGather[theme].subSpanColor);
      this.tranColor(
        "--background-color",
        themeGather[theme].backgroundColor
      );
      this.tranColor(
        "--button-background-color",
        themeGather[theme].buttonBackgroundColor
      );
      this.tranColor(
        "--button-hover-background-color",
        themeGather[theme].buttonHoverBackgroundColor
      );
      this.tranColor("--button-color", themeGather[theme].buttonColor);
      this.tranColor("--border-color", themeGather[theme].borderColor);
      this.tranColor(
        "--matted-span-color",
        themeGather[theme].mattedSpanColor
      );
      this.tranColor(
        "--navigation-background-color",
        themeGather[theme].navigationBackgroundColor
      );
      this.tranColor(
        "--navigation-active-background-color",
        themeGather[theme].navigationActiveBackgroundColor
      );
      this.tranColor(
        "--navigation-hover-background-color",
        themeGather[theme].navigationHoverBackgroundColor
      );
      this.props.history.goBack();
    });
  }

  render() {
    const navigationObj = this.state.navigationObj;

    return (
      <NormalPage
        showHeader={true}
        showRightNavigation={true}
        RightNavConfig={navigationObj}
        handleNavItemClick={this.handleNavItemClick}
      >
        <div className="PersonalCenter-Wrapper">
          {this.state.navigationObj.chose === 0 && <MineBlock />}
        </div>
        <Dialog visible={this.state.modalVisible} onCancel={()=>{
          console.log("dialog close");
          this.setState({modalVisible:false})
        }} onConfirm={()=>{
          console.log("dialog confirm");
          this.logOutMethod();
        }}>
          <div className="modal-body">
            确定退出登录吗？
          </div>
        </Dialog>
      </NormalPage>
    );
  }
}

export default connect(
  (state: AppState) => state.global,
  (dispatch) =>
    bindActionCreators(
      {
        requestLogOut,
      },
      dispatch
    )
)(withRouter(PersonalCenter));
